<template>
  <van-popup v-model:show="showBottom" round closeable position="bottom">
    <div class="container">
      <div class="show">
        <div class="header">筛选</div>
        <div class="tags-content">
          <template v-for="(tags, index) in allTags" :key="index">
            <div class="show-types">
              <div class="title">
                <div class="name">{{ tags.name }}</div>
                <div class="expand" v-if="tags.items.length > 6" @click="toggleExpand(index)">
                  <span>{{ expandedIndex === index ? '收起' : '展开' }}</span>
                  <van-icon :name="expandedIndex === index ? 'arrow-up' : 'arrow-down'" />
                </div>
              </div>
              <div class="content" v-if="tags.items">
                <template v-for="(tag, tagIndex) in tags.items" :key="tag.tagId">
                  <div
                    class="tag-item"
                    :class="{ active: activeTagId === tag.tagId }"
                    v-show="expandedIndex === index || tagIndex < 6"
                    @click="clickTag(tag)"
                  >
                    #{{ tag.tagName }}
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>

      <div class="control">
        <van-button class="default reset" round hairline plain @click="reset">清空</van-button>
        <van-button class="default confirm" round hairline color="#FF1D41" @click="confirm"
          >确定</van-button
        >
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useStore } from '@/stores/index.js'
const store = useStore()

const allTags = computed(() => store.allTags)

const activeTagId = ref('') //当前激活的标签ID

const currentTag = ref(null)

const showBottom = ref(false)

const expandedIndex = ref(-1) // 记录当前展开的分类索引，-1表示都没有展开

onMounted(() => {})

//展开收起切换
const toggleExpand = (index) => {
  // 如果点击的是当前已展开的分类，则收起，否则展开该分类
  if (expandedIndex.value === index) {
    expandedIndex.value = -1 // 收起
  } else {
    expandedIndex.value = index // 展开
  }
}

const clickTag = (tag) => {
  activeTagId.value = tag.tagId //高亮

  currentTag.value = tag
  //store.setTag(tag.tagName, tag.tagId)
  //关闭弹窗
  // showBottom.value = false;
}

const reset = () => {
  activeTagId.value = ''
  currentTag.value = null
  store.resetTag(null, null)
}

const confirm = () => {
  store.setTag(currentTag.value.tagName, currentTag.value.tagId)
  //关闭弹窗
  showBottom.value = false
}

const openMoreTags = () => {
  showBottom.value = true
}

defineExpose({
  openMoreTags,
})
</script>

<style scoped lang="scss">
.container {
  padding: 15px 15px 0;
  position: relative;

  .show {
    margin-bottom: 50px;

    .header {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
    }

    .tags-content {
      display: flex;
      flex-direction: column;
      margin-top: 20px;

      .show-types {
        margin: 20px 0;

        .title {
          font-size: 14px;
          font-weight: 500;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;

          .name {
          }

          .expand {
            font-size: 12px;
            font-weight: 400;
            color: #919191;
          }
        }

        .content {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-auto-flow: row;
          align-items: center;
          grid-column-gap: 10px;
          grid-row-gap: 15px;
          margin-top: 20px;

          .tag-item {
            box-sizing: border-box;
            min-width: 0;
            color: #323038;
            background: #f6f6f7;
            font-size: 12px;
            border-radius: 20px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            // white-space: nowrap;
            word-break: break-all;

            &.active {
              color: #ff1d41;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  .control {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    gap: 20px;

    .reset {
      flex: 0 0 auto;
      padding: 0 40px;
    }

    .confirm {
      min-width: 0;
      flex: 1 1 0%;
    }
  }
}
</style>
